<template>
    <div class="apiCacheContainer">
        <div class="searchContainer">
            <ContainerSearch />
        </div>
        <div class="insertContainer">
            <el-button type="primary" plain size="small" icon="PlusOutlined" @click="addServiceContainer()">添 加</el-button>
            <el-button type="primary" plain size="small" icon="SyncOutlined" @click="batchRestartContainer()">批量重启服务</el-button>
        </div>
        <div>
            <el-table
                :data="serviceContainerDataList"
                style="width: 100%; margin-bottom: 20px; margin-top: 20px;"
                row-key="id"
                border
                :stripe="true"
                :show-overflow-tooltip="true"
                class="tableContainer"
                max-height="70vh"
                @selection-change="batchRestartSelect"
                ref="containerRef"
                v-loading="tableSearchLoading"
            >
                <el-table-column type="selection" width="45" />
                <el-table-column prop="dockerName" label="容器名称" />
                <el-table-column prop="dockerContainerId" label="容器ID" />
                <el-table-column prop="dockerImageId" label="镜像ID" />
                <el-table-column prop="dockerGitPath" label="容器git拉取地址" />
                <el-table-column prop="dockerNetworkMode" label="容器网络模式" />
                <el-table-column prop="dockerSourcePort" label="容器原始端口" />
                <el-table-column prop="dockerDestPort" label="容器目标端口" />
                <el-table-column prop="dockerSourceVolume" label="容器原始挂载路径" />
                <el-table-column prop="dockerDestVolume" label="容器目标挂载路径" />
                <el-table-column prop="dockerCmd" label="容器启动命令" />
                <el-table-column prop="dockerServiceAddress" label="容器所属服务IP" />
                <el-table-column prop="dockerServicePort" label="容器所属服务端口" />
                <el-table-column prop="applicationName" label="容器关联微服务" />
                <el-table-column align="center" width="400">
                    <template #header>
                        <span>操 作</span>
                    </template>
                    <template #default="scope">
                        <el-button size="small" type="success" @click="handleUpdate(scope.$index, scope.row)">修 改</el-button>
                        <el-button type="danger" size="small" @click="handleDelete(scope.$index, scope.row)">删 除</el-button>
                        <el-button type="primary" size="small" @click="handleCopy(scope.$index, scope.row)">复 制</el-button>
                        <el-button type="primary" plain size="small" @click="handleAppLog(scope.$index, scope.row)">日 志</el-button>
                        <el-button type="warning" size="small" @click="handleDeploy(scope.$index, scope.row)">一键部署</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
    <div>
        <ContainerAddOrUpdateDialog :containerForm="containerForm" :title="title"/>
        <ContainerDeleteDialog :containerForm="containerForm" />
        <ContainerSimpleDeployDialog :containerForm="containerForm" />
        <ContainerAppLogDialog ref="appLogDialog"/>
    </div>
</template>

<script>
import ContainerSearch from '@/components/containerManage/ContainerSearch'
import ContainerAddOrUpdateDialog from "@/components/containerManage/ContainerAddOrUpdateDialog";
import ContainerDeleteDialog from "@/components/containerManage/ContainerDeleteDialog";
import ContainerSimpleDeployDialog from "@/components/containerManage/ContainerSimpleDeployDialog";
import ContainerAppLogDialog from "@/components/containerManage/ContainerAppLogDialog";
import {createTag} from "@/utils/tagCreate";
import {containerAppLogList, containerInfoQuery, containerRestartInfo} from "@/request/container";
import {ElNotification} from "element-plus";

export default {
    name: "ContainerManage",
    components: {
        ContainerSearch,
        ContainerAddOrUpdateDialog,
        ContainerDeleteDialog,
        ContainerSimpleDeployDialog,
        ContainerAppLogDialog
    },
    data() {
        return {
            applicationList: [],
            containerForm: {
                id: '',
                dockerName: '',
                dockerContainerId: '',
                dockerImageId: '',
                dockerGitPath: '',
                dockerNetworkMode: '',
                dockerSourcePort: '',
                dockerDestPort: '',
                dockerSourceVolume: '',
                dockerDestVolume: '',
                dockerCmd: '',
                dockerServiceAddress: '',
                dockerServicePort: '',
                serviceId: '',
                cmdList: []
            },
            title: '',
            restartBachData: [],
            tableSearchLoading: false
        }
    },
    computed: {
        serviceContainerDataList() {
            return this.$store.state.serviceContainerDataList;
        },
        serviceContainerSearchData() {
            return this.$store.state.serviceContainerSearchData;
        }
    },
    methods: {
        addServiceContainer() {
            this.title = "添加容器";
            this.containerForm = {
                id: '',
                dockerName: '',
                dockerContainerId: '',
                dockerImageId: '',
                dockerGitPath: '',
                dockerNetworkMode: '',
                dockerSourcePort: '',
                dockerDestPort: '',
                dockerCmd: '',
                dockerServiceAddress: '',
                dockerServicePort: '',
                serviceId: '',
                volumeList: [],
                cmdList: []
            }
            this.$store.commit('changeServiceContainerAddOrUpdateDialogVisible', true);
        },
        buildVolumeList(sourceVolume, destVolume) {
            // 构建volumeList
            let sourceList = sourceVolume.split(",")
            let destList = destVolume.split(",")
            let tempList = []
            for (let index = 0; index < sourceList.length; index++) {
                tempList.push({
                    id: index + 1,
                    source: sourceList[index],
                    dest: destList[index]
                })
            }
            return tempList;
        },
        handleUpdate(index, row) {
            this.title = "修改容器";
            let volumeList = this.buildVolumeList(row.dockerSourceVolume, row.dockerDestVolume)
            this.containerForm = {
                id: row.id,
                dockerName: row.dockerName,
                dockerContainerId: row.dockerContainerId,
                dockerImageId: row.dockerImageId,
                dockerGitPath: row.dockerGitPath,
                dockerNetworkMode: row.dockerNetworkMode,
                dockerSourcePort: row.dockerSourcePort,
                dockerDestPort: row.dockerDestPort,
                dockerCmd: row.dockerCmd,
                dockerServiceAddress: row.dockerServiceAddress,
                dockerServicePort: row.dockerServicePort,
                serviceId: row.serviceId,
                volumeList: volumeList,
                cmdList: row.cmdList
            }
            this.$store.commit('changeServiceContainerAddOrUpdateDialogVisible', true);
        },
        handleDelete(index, row) {
            let volumeList = this.buildVolumeList(row.dockerSourceVolume, row.dockerDestVolume)
            this.containerForm = {
                id: row.id,
                dockerName: row.dockerName,
                dockerContainerId: row.dockerContainerId,
                dockerImageId: row.dockerImageId,
                dockerGitPath: row.dockerGitPath,
                dockerNetworkMode: row.dockerNetworkMode,
                dockerSourcePort: row.dockerSourcePort,
                dockerDestPort: row.dockerDestPort,
                dockerCmd: row.dockerCmd,
                dockerServiceAddress: row.dockerServiceAddress,
                dockerServicePort: row.dockerServicePort,
                serviceId: row.serviceId,
                volumeList: volumeList,
                cmdList: row.cmdList
            }
            this.$store.commit('changeServiceContainerDeleteDialogVisible', true);
        },
        handleDeploy(index, row) {
            let volumeList = this.buildVolumeList(row.dockerSourceVolume, row.dockerDestVolume)
            this.containerForm = {
                id: row.id,
                dockerName: row.dockerName,
                dockerContainerId: row.dockerContainerId,
                dockerImageId: row.dockerImageId,
                dockerGitPath: row.dockerGitPath,
                dockerNetworkMode: row.dockerNetworkMode,
                dockerSourcePort: row.dockerSourcePort,
                dockerDestPort: row.dockerDestPort,
                dockerCmd: row.dockerCmd,
                dockerServiceAddress: row.dockerServiceAddress,
                dockerServicePort: row.dockerServicePort,
                serviceId: row.serviceId,
                volumeList: volumeList,
                cmdList: row.cmdList
            }
            this.$store.commit('changeServiceContainerDeployDialogVisible', true);
        },
        handleCopy(index, row) {
            this.title = "添加容器";
            let volumeList = this.buildVolumeList(row.dockerSourceVolume, row.dockerDestVolume)
            this.containerForm = {
                id: '',
                dockerName: row.dockerName,
                dockerContainerId: row.dockerContainerId,
                dockerImageId: row.dockerImageId,
                dockerGitPath: row.dockerGitPath,
                dockerNetworkMode: row.dockerNetworkMode,
                dockerSourcePort: row.dockerSourcePort,
                dockerDestPort: row.dockerDestPort,
                dockerCmd: row.dockerCmd,
                dockerServiceAddress: row.dockerServiceAddress,
                dockerServicePort: row.dockerServicePort,
                serviceId: row.serviceId,
                volumeList: volumeList,
                cmdList: row.cmdList
            }
            this.$store.commit('changeServiceContainerAddOrUpdateDialogVisible', true);
        },
        handleAppLog(index, row) {
            let childrenRef = this.$refs['appLogDialog']
            childrenRef.appLogFileList = [];
            childrenRef.containerId = "";
            childrenRef.searchLoading = true;
            // 查询数据
            containerAppLogList(row).then(res => {
                childrenRef.appLogFileList = res.data;
                childrenRef.containerId = row.dockerContainerId;
                childrenRef.searchLoading = false;
            })
            childrenRef.appLogDialogDialogFlag = true;
        },
        batchRestartSelect(val) {
            this.restartBachData = val;
        },
        batchRestartContainer() {
            containerRestartInfo(this.restartBachData).then(res => {
                if (res.code === '200') {
                    ElNotification({
                        title: 'Success',
                        message: res.message,
                        type: 'success'
                    });
                    let containerRef = this.$refs['containerRef']
                    containerRef.clearSelection()
                }
            })
        }
    },
    mounted() {
        createTag(this.$route, this.$store)
    },
    created() {
        this.tableSearchLoading = true;
        containerInfoQuery(this.serviceContainerSearchData).then(res => {
            if (res.code === '200') {
                this.$store.commit('changeServiceContainerDataList', res.data);
            }
            this.tableSearchLoading = false;
        }).catch(res => {
            this.tableSearchLoading = false;
        })
    }
}
</script>

<style scoped lang="less">
.apiCacheContainer {
    width: 98%;
    height: 100%;
    margin: 0.2%;
    .searchContainer {
        width: 100%;
        margin-top: 1%;
    }
    .tableContainer {
        margin-left: 1%;
    }
    .insertContainer {
        margin-left: 1%;
        margin-top: 0.7%;
    }
}
</style>